<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理 | 后台管理 </title>
	<link rel="stylesheet" type="text/css" href="./../element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../components/admin-frame.css" />
	<link rel="stylesheet" type="text/css" href="./../components/min-width-container.css" />
	<style>
			#app{
        	height: 100%;
        }


    </style>
</head>
<body>
<div id="app">
	<admin-frame active="4" title="用户管理">
		<min-width-container>
			<div class="m-t-8 m-b-8">
				<div class="app-title text-2 text-important">用户管理列表</div>
			</div>
			<div>
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column fixed prop="id" label="编号" width="60">
						</el-table-column>
						<el-table-column prop="account" label="用户名" width="100">
						</el-table-column>
						<el-table-column prop="name" label="姓名">
						</el-table-column>
						<el-table-column label="性别" width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.sex === 0">保密</span>
								<span v-if="scope.row.sex === 1">男</span>
								<span v-if="scope.row.sex === 2">女</span>
							</template>
						</el-table-column>
						<el-table-column prop="age" label="年龄" width="60">
						</el-table-column>
						<el-table-column prop="phone" label="手机号" width="200">
						</el-table-column>
						<el-table-column prop="email" label="邮箱" width="150">
						</el-table-column>
						<el-table-column label="操作" width="150">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
								<el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</min-width-container>
	</admin-frame>
	<el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible" width="640px">
		<el-form ref="form" :model="dialogFormItem" :rules="rules" :label-width="100">
			<el-form-item label="账号">
				<el-input v-model="dialogFormItem.account" autocomplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="dialogFormItem.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="年龄" prop="age">
				<el-input v-model="dialogFormItem.age" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input v-model="dialogFormItem.phone" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="dialogFormItem.email" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio size="mini" v-model="dialogFormItem.sex" label="0">保密</el-radio>
				<el-radio size="mini" v-model="dialogFormItem.sex" label="1">男</el-radio>
				<el-radio size="mini" v-model="dialogFormItem.sex" label="2">女</el-radio>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
			<el-button type="primary" size="mini" @click="save">确 定</el-button>
		</div>
	</el-dialog>
</div>
<script src="./../js/vue.js"></script>
<script src="./../js/axios.min.js"></script>
<script src="./../element-ui/index.js"></script>
<script src="../components/admin-frame.js"></script>
<script src="./../components/min-width-container.js"></script>
<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						tableData: [],
						dialogFormVisible: false,
						dialogFormItem: {
							id: '',
							account: '',
							name: '',
							age: '',
							phone: '',
							email: '',
							sex: ''
						},
						rules: {
							name: [{
								validator: (rule, value, callback) => {
									if (value.length > 5) {
										callback(new Error("不能超过5个字符"))
									} else {
										callback()
									}
								},
								trigger: 'blur'
							}],
							age: [{
								validator: (rule, value, callback) => {
									if (/^\d{1,2}$/.test(value)) {
										callback()
									} else {
										callback(new Error("请输入正确的年龄"))
									}
								},
								trigger: 'blur'
							}],
							phone: [{
								validator: (rule, value, callback) => {
									if (value === "" || /^1\d{10}$/.test(value)) {
										callback()
									} else {
										callback(new Error("请输入正确的手机号"))
									}
								},
								trigger: 'blur'
							}],
							email: [{
								validator: (rule, value, callback) => {
									if (value === "" || /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
										callback()
									} else {
										callback(new Error("请输入正确的电子邮箱"))
									}
								},
								trigger: 'blur'
							}],
						}
					};
				},
				created() {
					this.load_users();
				},
				methods: {
					load_users() {
						axios.post("/mgr/user/finduserlist.do").then(response => {
							if (response.data.status === 0) {
								this.tableData = response.data.data;
							} else {
								if (response.data.msg) {
									console.log(response.data.msg);
								}
							}
						}).catch(err => {
							console.log(err);
						});
					},
					edit(row) {
						this.dialogFormVisible = true;
						this.dialogFormItem = (row);
						this.dialogFormItem.sex += '';
					},
					save() {
						this.$refs.form.validate((valid) => {
							if (valid) {
								const params = new URLSearchParams();
								params.append("id", this.dialogFormItem.id);
								params.append("name", this.dialogFormItem.name);
								params.append("account", this.dialogFormItem.account);
								params.append("age", this.dialogFormItem.age);
								params.append("phone", this.dialogFormItem.phone);
								params.append("email", this.dialogFormItem.email);
								params.append("sex", this.dialogFormItem.sex);
								axios.post("/mgr/user/updateuser.do", params).then(response => {
									if (response.data.status === 0) {
										this.$message({
											message: "更新成功",
											type: "success"
										});
										this.dialogFormVisible = false;
										this.load_users();
									} else {
										if (response.data.msg) {
											this.$message.error(response.data.msg);
										}
									}
								}).catch(err => {
									console.log(err);
									this.$message.error("连接服务器异常");
								});
							}
						});
					},
					remove(row) {
						this.$confirm('确实删除此用户吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							const params = new URLSearchParams();
							params.append("id", row.id);
							axios.post("/mgr/user/deleteusers.do", params).then(response=>{
								if(response.data.status === 0){
									this.$message({
										message: "删除成功",
										type: "success"
									});
									this.load_users();
								}else{
									if(response.data.msg){
										console.log(response.data.msg);
										this.$message.error(response.data.msg);
									}
								}
							}).catch(err=>{
								console.log(err);
								this.$message.error("连接服务器异常");
							});
						}).catch(() => { });


					}
				},
			});
		</script>
</body>
</html>
